<template>
    <div class="cart">
        <div class="glory-cart" v-if="list.length">
            <h2 class="cart-one">
                <span>购物车</span>
                <span>编辑</span>
            </h2>
            <main>
            <ul>
                <li v-for="(v,index) in list" :key="index">
                    <div class="top">
                        <span></span>
                        <span>{{v.sell}}</span>
                        <span @click="remove(index,v.id)">删除</span>
                    </div>
                    <div class="main">
                        <input type="checkbox" checked='flag'>
                         <!-- <van-checkbox v-model="checked"></van-checkbox> -->
                         <img :src="v.src" alt="">
                         <div class="txt">
                            <p class="name">{{v.name}}</p>
                            <p class="pz">{{v.pz}}</p>
                            <div class="active">
                                <span>{{v.activeO}}</span> <span>{{v.activeT}}</span>
                            </div>
                         </div>
                    </div>
                    <div class="price-button">
                                <p class="price">{{v.price}}</p>
                                <div class="num">
                                    <button @click="prev(index)" :disabled="v.num <=0">-</button>
                                    <p>{{v.num}}</p>
                                    <button @click="add(index)">+</button>
                                </div>
                            </div>
                </li>
            </ul>
        </main>  
        <div class="foot-pay" >   
            <input type="checkbox" checked=""> 
            <span>总计￥ {{totalprice}}</span>
            <button @click="tijiao">提交订单</button>
        </div>
       
        </div> 
         <div v-else style="font-size:40px;font-weight:700;width:100%">
            <span @click="tobuy" style="margin:auto">购物车为空</span></div>
         <van-tabbar id="footer" v-model="active" active-color="black" inactive-color="white">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" replace to="/second">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" replace >购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" replace to="/wode">我的</van-tabbar-item>
    </van-tabbar>
    </div>
</template>

<script>
export default {
  data(){
    return {
        list:[],
        active: 0,
        zero:0,
        flag:"",
    }
  },
  mounted(){
    this.$http({
        url:"http://localhost:3000/cart",
        method:"get"
    }).then(res=>{
        this.list = res.data;
    });
  },
  methods:{
     prev(index){
        this.list[index].num --
    },
    add(index){
        this.list[index].num++
    },
    tijiao(){
        this.$router.push('/cashdesk')
    },
    remove(index,id){
        this.list.splice(index,1)
        this.$http({
            url:`http://localhost:3000/cart/${id}`,
            method:"delete",
        }).then(res=>{
            this.$router.go(0);
            console.log(res.data)
        }).catch(err=>{
            console.log(err);
        })
    },
    tobuy(){
        this.$router.push('/myhome')
    }
  },
  computed:{
    totalprice(){
        let totalPrice = 0;
        for(let i = 0; i <this.list.length;i++){
            totalPrice += this.list[i].price * this.list[i].num;
        }
        return totalPrice;
    }
  }
}
</script>

<style scoped>
   #footer {
    width: 23.4375rem;
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}
 .cart{
    position: relative;
 }
.van-tabbar-item--active {
  color: white;
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}
  .glory-cart {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: rgb(248, 248, 248);
  width: 100%;height: 100%;
}
.cart-one {
  align-self: start;
  font-size: 1.3rem;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cart-one span:nth-child(2){
    font-size: .8rem;
}
.glory-cart main{
    flex: 1;
    margin-bottom: 5.5rem;
}
.glory-cart ul {
    width: 100%;
}
.glory-cart li{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 2rem;
}
.glory-cart li .top{
    display: flex;
    width: 100%;
    align-items: center;
}
.glory-cart li .top span:nth-child(1){
    width: 1.625rem;
    height: 1.125rem;
   background: url() no-repeat;
   background-size: 100%;
}
.glory-cart li .top span:nth-child(2){
    margin-left: .625rem;
    font-size: .8rem;
}
.glory-cart li .top span:nth-child(3){
    margin-left: 12rem;
    border: 1px solid #777;
    border-radius: 1.25rem;
    width: 3.1875rem;
    text-align: center;
    height: 1.5313rem;
    line-height: 1.5313rem;
}
.glory-cart li .main{
    display: flex;
    margin-top: .625rem;
    height: 5.625rem;
    align-items: center;
    width: 100%;
}
.glory-cart li .main img{
    width: 5.1875rem;
    height: 5.1875rem;
}
.glory-cart li .main .txt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.glory-cart li .main .txt .name{
   font-size: .9rem;
}
.glory-cart li .main .txt .pz{
   font-size: .7rem;
   margin-top: .325rem;
}
.glory-cart li .main .txt .active{
    display: flex;
    margin: .3125rem 0 .3125rem;
}
.glory-cart li .main .txt .active span{
    width: 3.7813rem;
    height: .9063rem;
    border-radius: .625rem;
    border: 1px solid rgb(92, 92, 255);
    font-size: .4rem;
    text-align: center;
    line-height: .9063rem;
    color: rgb(92, 92, 255);
}
.glory-cart li .price-button{
    display: flex;
    width: 15.1875rem;
    margin-left: 5.925rem;
    margin-top: 1rem;
    align-items: center;
}
.glory-cart li .price-button .price{
    font-size: 1rem;
    font-weight: 700;
    justify-content: space-between;
    width: 19.75rem;
    
}
.glory-cart li .price-button .num{
    display: flex;
    width: 5.25rem;
    align-items: center;
}
.glory-cart li .price-button .num p{
    margin: 0 .375rem;
}
.glory-cart li .price-button .num button{
    width: 1.5625rem;
    height: 1.5625rem;
    border-radius: 50%;
}
.tijiao{
    margin-bottom: 50px;
}
.jia{
    display: flex;
}
.remove{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}
.foot-pay{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.foot-pay span{
    /* margin-right: 2.125rem; */
    font-size: 1.2rem;
}
.foot-pay button{
    background-color: blue;
    color: #fff;
    width: 13.25rem;
    height: 2.5rem;
    border-radius: 1.875rem;
}
</style>